<template>
  <div>
    <el-button type="primary" @click="openAlert">弹出alert</el-button>
    <el-button type="primary" @click="openConfirm">弹出confirm</el-button>
    <el-button type="primary" @click="openPrompt">弹出prompt</el-button>
  </div>
</template>

<script>
export default {
  name: "MessageBox",
  methods: {
    openAlert() {
      this.$alert("提示内容", "提示标题", {
        confirmButtonText: "确定",
        callback: (action) => {
          alert("单击确定了");
          alert("类型是" + action);
        },
      });
    },
    openConfirm() {
      this.$confirm("你确定删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          alert("你点击了确定");
        })
        .catch(() => {
          alert("你点击了取消");
        });
    },
    openPrompt() {
      this.$prompt("请输入邮箱", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then((data)=>{
          console.log(data.value);// 可以获取用户输入的信息
            alert("你单击了确定")
      }).catch(()=>{
          alert("你单击了取消")
      })
    },
  },
};
</script>

<style>
</style>